<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人格分布分析</title>
    <!-- 引入 ECharts -->
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <script type="text/javascript" src="js/dataTool.min.js"></script>
    <script type="text/javascript" src="js/echarts-gl.min.js"></script>
    <script type="text/javascript" src="js/ecStat.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"></script>
    <script type="text/javascript" src="js/d3.min.js"></script>
    <script src="js/不同年龄分布图.js"></script>
    <script src="js/男女不同年龄分布图.js"></script>
    <script src="js/男女分布条形图.js"></script>
    <script src="js/十特性不同年龄分布图.js"></script>

    <style>
        .chart-container {
            width: 600px;
            height: 300px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <!-- 第一块 -->
    <div>
        <h2>不同年龄不同人格分布</h2>
        <div id="agePersonalityChart" class="chart-container"></div>
    </div>

    <!-- 第二块 -->
    <div>
        <h2>男女不同人格分布</h2>
        <div id="genderPersonalityChart" class="chart-container"></div>
        <div>
            <input type="radio" id="total" name="gender" value="总体" checked>
            <label for="total">平均</label>
            <input type="radio" id="male" name="gender" value="男">
            <label for="male">男</label>
            <input type="radio" id="female" name="gender" value="女">
            <label for="female">女</label>
        </div>
    </div>

    <!-- 第三块 -->
    <div>
        <h2>男女不同人格对比图</h2>
        <div id="genderBarChart" class="chart-container"></div>
    </div>

    <!-- 第四块 -->
    <div>
        <h2>十特性不同年龄分布</h2>
        <div id="tenTraitsAgeChart" class="chart-container"></div>
        <div>
            <input type="radio" id="anxietyDepression" name="trait" value="焦虑与抑郁">
            <label for="anxietyDepression">焦虑与抑郁</label>
            <input type="radio" id="confidenceActivity" name="trait" value="自信与活跃">
            <label for="confidenceActivity">自信与活跃</label>
            <input type="radio" id="aestheticCreativity" name="trait" value="审美与创意">
            <label for="aestheticCreativity">审美与创意</label>
            <input type="radio" id="altruismCompliance" name="trait" value="利他与顺从">
            <label for="altruismCompliance">利他与顺从</label>
            <input type="radio" id="orderSelfDiscipline" name="trait" value="条理与自律">
            <label for="orderSelfDiscipline">条理与自律</label>
        </div>
    </div>

    <!-- JavaScript -->
    <script>

    
        // 假设这是从不同脚本文件获取数据的函数
        function loadAgePersonalityData() {
            drawAgePersonalityChart();
            // 调用“不同年龄分布图.js”
        }
        function loadGenderPersonalityData(gender) {
            genderPersonalityChart.clear();
            drawGenderPersonalityChart(gender);
            // 调用“男女不同年龄分布图.js”
        }
        function loadGenderBarData() {
            drawGenderBarChart();
            // 调用“男女分布条形图.js”
        }
        function loadTenTraitsAgeData(trait) {
            tenTraitsAgeChart.clear();
            drawTenTraitsAgeChart(trait);
            // 调用“十特性不同年龄分布图.js”
        }

        // 初始化图表
        const agePersonalityChart = echarts.init(document.getElementById('agePersonalityChart'));
        const genderPersonalityChart = echarts.init(document.getElementById('genderPersonalityChart'));
        const genderBarChart = echarts.init(document.getElementById('genderBarChart'));
        const tenTraitsAgeChart = echarts.init(document.getElementById('tenTraitsAgeChart'));

        // 加载数据并设置图表
        loadAgePersonalityData();
        loadGenderPersonalityData('总体');
        loadGenderBarData();
        loadTenTraitsAgeData('焦虑与抑郁');

    // 2获取所有的gender单选按钮
    const radios_sex = document.querySelectorAll('input[type="radio"][name="gender"]');
    // 遍历每一个单选按钮
    radios_sex.forEach(radio => {
    // 添加 change 事件监听器
        radio.addEventListener('change', function() {
    // 当单选按钮被选中时，输出其 value 值
        const selectedSex = this.value;
        loadGenderPersonalityData(selectedSex);
        });
    });

    // 4获取所有的trait单选按钮
    const radios_trait = document.querySelectorAll('input[type="radio"][name="trait"]');
    // 遍历每一个单选按钮
    radios_trait.forEach(radio => {
    // 添加 change 事件监听器
        radio.addEventListener('change', function() {
    // 当单选按钮被选中时，输出其 value 值
        const selectedTrait = this.value;
        loadTenTraitsAgeData(selectedTrait);
        });
    });

    </script>
</body>
</html>